<template>
  <div class="detail-section">
    <div class="header">
      <div class="title">{{ title }}</div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer" v-if="moreText ? true : false">
      <div class="more">
        {{ moreText }}
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script setup>
  defineProps({
    title: {
      type: String,
    },
    moreText: {
      type: String
    }
  })
</script>

<style lang="less" scoped>
  .detail-section {
    padding: 0 15px;
    margin-top: 12px;
    border-top: 5px solid #f2f3f4;
    background-color: #fff;

    .header {
      height: 50px;
      line-height: 50px;
      border-bottom: solid 1px #eee;
      margin-bottom: 10px;

      .title {
        font-size: 20px;
        font-weight: 700;
        color: #333;
      }
    }

    .footer {
      color: var(--primary-color);
      font-size: 14px;
      font-weight: 700;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 44px;
      line-height: 44px;
      margin-top: 10px;
    }
  }
</style>